<template>
  <!-- 分享管理 -->
  <div v-loading="loading">
    <!-- 头部导航及删除 -->
    <NavigationComponent>
      <div class="create_box">
        <el-button type="danger" @click="getDelete(null)">
          <el-icon><Delete /></el-icon>
          <span class="create_text">{{ $t('teamDoc.enjoyLink.topBtn') }}</span>
        </el-button>
      </div>
    </NavigationComponent>

    <!-- 搜索 -->
    <div class="search-top">
      <!-- 搜索 -->
      <el-input
        :placeholder="$t('teamDoc.enjoyLink.searchContent')"
        prefix-icon="el-icon-search"
        v-model="searchValue"
        class="inputClass"
        @keyup.enter.native="getTableData('reset')"
      >
      </el-input>
      <el-divider direction="vertical"></el-divider>
      <!--选项  -->
      <div @click="getChange('myLink')" class="link-btn" :class="enjoyValue == 'myLink' ? 'isActive' : ''">
        {{ $t('teamDoc.enjoyLink.linkSharing') }}
      </div>
      <div @click="getChange('receivedLink')" class="link-btn" :class="enjoyValue == 'receivedLink' ? 'isActive' : ''">
        {{ $t('teamDoc.enjoyLink.receLink') }}
      </div>
    </div>

    <!-- 内容 -->
    <div class="table_box">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :row-style="{ height: '52px' }"
        :header-row-style="{ height: '52px' }"
        @selection-change="getSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column :label="$t('teamDoc.enjoyLink.fileName')" prop="name" show-overflow-tooltip min-width="200">
          <template v-slot:header="scope">
            <span v-if="tableDataSelection.length == 0">{{ $t('teamDoc.enjoyLink.fileName') }}</span>
            <div v-else class="btn-header">
              <div class="btn-box" @click="getDeleteList">
                <svg-icon icon-class="trash" class="btn-icon"></svg-icon>
                {{ $t('teamDoc.enjoyLink.del') }}
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="isDownload" label="">
          <template v-slot:header="scope">
            <span v-if="tableDataSelection.length == 0">{{ $t('teamDoc.enjoyLink.IsDownLoad') }}</span>
            <span v-else></span>
          </template>

          <template #default="scope">
            {{ scope.row.isDownload ? $t('teamDoc.enjoyLink.downloadable') : $t('teamDoc.enjoyLink.notDownloadable') }}
          </template>
        </el-table-column>

        <el-table-column prop="createTime" :label="$t('teamDoc.enjoyLink.creationTime')" show-overflow-tooltip>
          <template v-slot:header="scope">
            <span v-if="tableDataSelection.length == 0">{{ $t('teamDoc.enjoyLink.creationTime') }}</span>
            <span v-else></span>
          </template>
        </el-table-column>

        <el-table-column prop="deadline" :label="$t('teamDoc.enjoyLink.expirationTime')" show-overflow-tooltip>
          <template v-slot:header="scope">
            <span v-if="tableDataSelection.length == 0">{{ $t('teamDoc.enjoyLink.expirationTime') }}</span>
            <span v-else></span>
          </template>
        </el-table-column>

        <el-table-column prop="password" :label="$t('teamDoc.enjoyLink.password')" show-overflow-tooltip>
          <template v-slot:header="scope">
            <span v-if="tableDataSelection.length == 0">{{ $t('teamDoc.enjoyLink.password') }}</span>
            <span v-else></span>
          </template>
        </el-table-column>

        <el-table-column prop="deleteBy" :label="$t('commen.operation')" fixed="right" align="center" show-overflow-tooltip>
          <template v-slot:header="scope">
            <span v-if="tableDataSelection.length == 0">{{ $t('commen.operation') }}</span>
            <span v-else></span>
          </template>

          <template v-slot="operate">
            <el-tooltip class="item" effect="dark" :content="$t('teamDoc.enjoyLink.edit')" placement="top">
              <el-icon><EditPen @click="getEdit(operate.row.id)" v-if="enjoyValue == 'myLink'" /></el-icon>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('teamDoc.enjoyLink.del')" placement="top">
              <el-icon><Delete @click="getDelete(operate.row.id)" /></el-icon>
            </el-tooltip>
            <!-- //v-if="enjoyValue == 'myLink'" -->
            <el-tooltip class="item" effect="dark" :content="$t('teamDoc.enjoyLink.copyLink')" placement="top">
              <el-icon><Link @click="getCopy(operate.row)" /></el-icon>
            </el-tooltip>
            <!-- <el-tooltip  effect="dark" content="打开链接" placement="top" v-else>   
              <el-link :underline="false" :href="operate.row.linkAddress"> 
                 <i class="el-icon-link"></i> 
              </el-link>
            </el-tooltip> -->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      @size-change="getSizeChange"
      @current-change="getPageChange"
      v-model:current-page="commonParams.page"
      :page-sizes="[10, 20, 30, 40]"
      v-model:page-size="commonParams.size"
      layout="total, prev, pager, next, sizes"
      :total="commonParams.total"
    />
  </div>

  <LinkEnjoyDialog ref="LinkEnjoyDialogRef" :Refresh="true" @getTableData="getTableData" />
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user';
import LinkEnjoyDialog from '@/views/personDoc/personal-component/link-enjoy-dialog.vue'; // 修改链接

import NavigationComponent from './personal-component/navigation-component.vue'; // 导航信息
const { proxy } = getCurrentInstance() as any;
import { ApiPerSharePerson, ApiPerSharedPerson, ApiPerDeleteShare, ApiPerDelAllByType, ApiPerreceivedDel } from '@/api/personDoc/personDocApi';
const loading = ref(false);
const userStore = useUserStore();
const LinkEnjoyDialogRef = ref();
const searchValue = ref('');
const tableData = ref([]);
const tableDataSelection = ref([]);
const enjoyValue = ref('myLink');
const commonParams = ref({
  page: 1,
  size: 10,
  total: 0
});

// 获取数据
const getTableData = async (reset) => {
  loading.value = true;
  if (reset == 'reset') {
    commonParams.value.page = 1;
    commonParams.value.size = 10;
  }
  let oParam = {
    page: commonParams.value.page - 1,
    size: commonParams.value.size,
    // 当前的用户id
    userId: userStore.userId,
    type: 'personal',
    name: searchValue.value || null
  };

  if (enjoyValue.value == 'myLink') {
    await ApiPerSharePerson(oParam).then((res) => {
      if (res.code == 200) {
        tableData.value = res.rows;
        commonParams.value.total = res.total;
        loading.value = false;
      }
    });
  } else {
    await ApiPerSharedPerson(oParam).then((res) => {
      if (res.code == 200) {
        tableData.value = res.rows;
        commonParams.value.total = res.total;
        loading.value = false;
      }
    });
  }
};

// 没有参数  一键删除所有无效链接  | 有参数  table 里面单个删除
const getDelete = (e) => {
  let oParam = {
    userId: userStore.userId,
    type: 'personal'
  };

  ElMessageBox.confirm(proxy.$t('teamDoc.enjoyLink.tip1'), proxy.$t('commen.title'), {
    confirmButtonText: proxy.$t('commen.confirm'),
    cancelButtonText: proxy.$t('commen.cancel'),
    type: 'warning'
  })

    .then(async () => {
      e ? await ApiPerDeleteShare([e]) : await ApiPerDelAllByType(oParam);
      getTableData(null);
      ElMessage.success(proxy.$t('teamDoc.enjoyLink.tip2'));
    })
    .catch(() => {});
};

// 编辑
const getEdit = (val) => {
  LinkEnjoyDialogRef.value.openDialog(val);
  // this.$refs.linkEnjoyDialogRefs.dialogEnjoy = true;
  // this.$refs.linkEnjoyDialogRefs.editHistoryLink(val);
};

// 多选
const getSelectionChange = (val) => {
  tableDataSelection.value = val;
};

// 复制链接
const getCopy = (val) => {
  if (enjoyValue.value == 'myLink') {
    let url = val.linkAddress;
    //新建一个文本框
    let oInput = document.createElement('input');
    //赋值给文本框
    oInput.value = url;
    document.body.appendChild(oInput);
    // 选择对象;
    oInput.select();
    // 执行浏览器复制命令
    document.execCommand('Copy');
    //复制完成删除掉输入框
    oInput.remove();
    ElMessage.success('复制成功');
  } else {
    const url = `${val.linkAddress}?password=` + `${val.password}`;
    // 跳转到 URL 页面
    window.location.href = url;
  }
};

// 切换 链接分享 | 收到的链接分享
const getChange = (e) => {
  enjoyValue.value = e;
  getTableData('reset');
};

// table 项选中的删除
const getDeleteList = () => {
  let ids = tableDataSelection.value.map((item) => item.id);

  ElMessageBox.confirm(proxy.$t('teamDoc.enjoyLink.tip1'), proxy.$t('commen.title'), {
    confirmButtonText: proxy.$t('commen.confirm'),
    cancelButtonText: proxy.$t('commen.cancel'),
    type: 'warning'
  })
    .then(async () => {
      enjoyValue.value == 'myLink' ? await ApiPerDeleteShare(ids) : await ApiPerreceivedDel(ids);
      getTableData('reset');
      ElMessage.success(proxy.$t('teamDoc.enjoyLink.tip2'));
    })
    .catch(() => {});
};

//分页
const getPageChange = (val) => {
  commonParams.value.page = val;
  getTableData(null);
};
//每页
const getSizeChange = (val) => {
  commonParams.value.size = val;
  getTableData(null);
};

onMounted(() => {
  getTableData('reset');
});
</script>

<style scoped lang="scss">
// ::v-deep .el-input__wrapper {
//   box-shadow: none;
//   border: none;
// }

.search-top {
  display: flex;
  align-items: center;
  height: 48px;
  padding-right: 20px;
  margin-left: 20px;
  border-bottom: 1px solid #eee;

  .inputClass {
    width: 220px;

    :deep(.el-input__inner) {
      box-shadow: none !important;
      border: none !important;
    }

    :deep(.el-input__wrapper) {
      box-shadow: none !important;
      border: none !important;
    }
  }

  .link-btn {
    background: #f5f5f5;
    border-radius: 22px 22px 22px 22px;
    font-size: 12px;
    padding: 5px 13px;
    color: #666;
    margin-left: 20px;
    cursor: pointer;
  }

  .isActive {
    color: #6698ff;
    background-color: #eff4ff;
  }
}

.table_box {
  overflow: auto;
  height: calc(100vh - 210px);
  margin-left: 20px;

  .btn-header {
    height: 32px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 999;
    padding: 0px;

    .btn-box {
      display: flex !important;
      align-items: center !important;
      color: #666;
      font-size: 14px;
      padding: 0px;
      margin-right: 20px;
      cursor: pointer;
      white-space: nowrap;
      font-weight: 400;

      .btn-icon {
        margin-right: 6px;
        color: #999;
        font-size: 15px;
      }

      .svg-icon {
        width: 15px;
        height: 15px;
        margin-right: 6px;
      }
    }

    .btn-box:hover {
      color: rgb(102, 152, 255);
    }

    .btn-box:hover .svg-icon {
      color: rgb(102, 152, 255);
    }

    .btn-box:hover .btn-icon {
      color: rgb(102, 152, 255);
    }
  }

  i {
    font-size: 16px;
    margin-right: 10px;
    cursor: pointer;
  }
}

.el-pagination {
  // margin-top: 25px;
  padding: 0px 16px;
}
</style>
<style lang="scss">
.select-link {
  .el-select-dropdown__item:hover {
    background-color: #b4b6b9;
  }
}
</style>
